<template>
    <div class="ticket-container">

      <el-table
        :data="tableData"
        style="width: 99.8%;position: absolute;right: 0; margin-top: 5%"
        @selection-change="handleSelectionChange">
        <el-table-column
          label="航班编号"
          prop="flightId"
          width="100">
        </el-table-column>
        <el-table-column
          label="起飞时间"
          prop="takeOffDate"
          width="190">
        </el-table-column>
        <el-table-column
          prop="arriveDate"
          label="抵达时间"
          width="190">
        </el-table-column>
        <el-table-column
          prop="takeOffAerodrome"
          label="起飞机场"
          width="90">
        </el-table-column>
        <el-table-column
          prop="arriveAerodrome"
          label="抵达机场"
          width="90">
        </el-table-column>
        <el-table-column
          prop="businessPrice"
          label="商务舱票价"
          width="90">
        </el-table-column>
        <el-table-column
          prop="economyPrice"
          label="经济舱票价"
          width="90">
        </el-table-column>
        <el-table-column
          prop="economyClass"
          label="经济舱数量"
          width="90">
        </el-table-column>
        <el-table-column
          prop="businessClass"
          label="商务舱数量"
          width="90">
        </el-table-column>
        <el-table-column
          prop="gate"
          label="登机口"
          width="90">
        </el-table-column>
        <el-table-column fixed="right" width="300px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="visible2 = true;currentTicket = scope.row;gate = scope.row.gate;" style="position: absolute; left: 5%; top:19%">修改登机口</el-button>
            <el-button
              size="mini"
              type="info"
              @click="visible = true;currentTicket = scope.row;type = 0" style="position: absolute; left: 38%; top:19%">经济舱</el-button>
            <el-button
              size="mini"
              type="success"
              @click="visible = true;currentTicket = scope.row;type = 1" style="position: absolute; left: 68%; top:19%">商务舱</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="填写购买人信息" :visible.sync="visible">
        <el-form ref="form" :model="passengerMessage" label-width="80px">
          <el-form-item label="乘客身份证" label-width="100px">
            <el-input v-model="passengerMessage.passengerId"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="passengerMessage.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="passengerMessage.sex" placeholder="请选择">
              <el-option
                label="男"
                value="男">
              </el-option>
              <el-option
                label="女"
                value="女">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="passengerMessage.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="type === 0 ? getEconomyClass() : getBusinessClass()">立即购买</el-button>
            <el-button @click="visible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="修改登机口" :visible.sync="visible2">
        <el-form ref="form"  label-width="80px">
          <el-form-item label="登机口" label-width="100px">
            <el-input v-model="gate"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="modifyGate">确认修改</el-button>
            <el-button @click="visible2 = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="nextPage()"
        style="position: absolute; bottom: 10%;left: 32%">
      </el-pagination>

    </div>
</template>

<script>

  import {getTicketPage,
    getEconomyClass,
    getBusinessClass,
    modifyGate} from "../api/ticket";
  import {Message} from "element-ui";

  export default {
        name: "Ticket",
        data(){
          return{
            visible:false,
            visible2:false,
            total:'',
            pageSize:6,
            currentPage:'',
            currentTicket:'',
            type:'',
            gate:'',
            passengerMessage:{
              passengerId:'',
              name:'',
              sex:'',
              phone:''
            },
            tableData:[]
          }
        },

       methods:{
         handleSelectionChange(val){
           console.log(val)
         },

         getEconomyClass(){
           const _this = this;
           this.$confirm('是否购买经济舱机票?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
             getEconomyClass({
               passenger:this.passengerMessage,
               flightId:this.currentTicket.flightId
             }).then(function (response) {
               Message({
                 message: response.data.message,
                 type: 'success',
                 duration: 2 * 1000
               })
               getTicketPage({
                 pageNum:_this.currentPage,
                 pageSize: _this.pageSize
               }).then(function (response) {
                 _this.total = response.data.obj.total;
                 _this.tableData = response.data.obj.ticketList;
               })
               _this.visible = false;
             })
           }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消购买'
             });
           });
         },

         getBusinessClass(){
           const _this = this;
           this.$confirm('是否购买商务舱机票?', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
           }).then(() => {
             getBusinessClass({
               passenger:this.passengerMessage,
               flightId:this.currentTicket.flightId
             }).then(function (response) {
               Message({
                 message: response.data.message,
                 type: 'success',
                 duration: 2 * 1000
               })
               getTicketPage({
                 pageNum:_this.currentPage,
                 pageSize: _this.pageSize
               }).then(function (response) {
                 _this.total = response.data.obj.total;
                 _this.tableData = response.data.obj.ticketList;
               })
               _this.visible = false;
             })
           }).catch(() => {
             this.$message({
               type: 'info',
               message: '已取消购买'
             });
           });
         },

         modifyGate(){
           const _this = this;
           console.log(this.currentTicket.ticketId)
           console.log(this.gate)
           modifyGate({
             ticketId:this.currentTicket.ticketId,
             gate: this.gate,
           }).then(function (response) {
             Message({
               message: response.data.message,
               type: 'success',
               duration: 2 * 1000
             })
             getTicketPage({
               pageNum:_this.currentPage,
               pageSize: _this.pageSize
             }).then(function (response) {
               _this.total = response.data.obj.total;
               _this.tableData = response.data.obj.ticketList;
             })
             _this.visible2 = false;
           })
         },

         nextPage(){
           const _this = this
           getTicketPage({
             pageSize:this.pageSize,
             pageNum:this.currentPage
           }).then(function (response) {
             _this.tableData = response.data.obj.ticketList;
             _this.total = response.data.obj.total;
           })
         }
       },

      created() {
          const _this = this;
          getTicketPage({
            pageSize:this.pageSize,
            pageNum:1
          }).then(function (response) {
            _this.tableData = response.data.obj.ticketList;
            _this.total = response.data.obj.total;
          })
      }

    }
</script>

<style>

  *{
    padding: 0;
    margin: 0;
  }

</style>
